<template>
	<div class="aimate-card">
		<div class="card-group" v-for="(item,idx) in val" :key="idx" :style="{'font-size': size+'px'}">
			<transition-group enter-active-class="animate__animated animate__bounceIn"
				leave-active-class="animate__animated animate__fadeOutDown">
				<div class="card-item" 
					:class="{'disabled': selfDisabled}" 
					v-for="num in 10" :key="num"
					v-show="item == num-1">
						<image :src="`../../static/images/${num-1}@2x.png`" mode=""></image>
				</div>
			</transition-group>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			val: {
				type: Array,
				default: () => ['0', '0'],
			},
			size: {
				type: Number,
				default: 16,
			},
			selfDisabled: {
				type: Boolean,
				default: false,
			},
		},

		mounted() {
		},
	}
</script>

<style lang="scss" scoped>
	.aimate-card {
		width: auto;
		display: inline-block;
		height: 100%;
		padding: 0rpx 40rpx;

		.card-group {
			display: inline-block;
			height: 100%;
			width: 50rpx;
			padding: 0rpx 2rpx;
			.card-item {
				color: #fff;
				width: 50rpx;
				height: 80rpx;
				line-height: 40px;
				image {
					width: 50rpx !important;
					height: 80rpx !important;
				}
			}

			.disabled {
				background: #ccc !important;
			}
		}
	}
</style>
